<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="robots" content="all" />
	<meta name="keywords" content="FLAG杯,FLAGcup,陆夫人,神奇陆夫人,bug体质,b站,bilibili" />
	<meta name="author" content="银发Victorique，svictorique@qq.com" />
	<link rel="shortcut icon" type="image/png" href="image/flagcup.png" />
	<title>FLAG杯 - 首页</title>
	<link rel="stylesheet" href="layui/css/layui.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="logo_box">
  <div class="wrap">
  	<img class="logo" src="image/flagcup.png" alt="FLAGcup" />
  </div>
</div>
<div class="nav_box">
	<div class="wrap">
		<a class="nav" href="home.html">首页</a>
		<a class="nav" href="enroll.html">报名通道</a>
		<a class="nav" href="schedule.html">赛事赛程</a>
	</div>
</div>
<div class="wrap">
	<div class="banner_box">
		<a class="" href="banner.html">
		<img class="banner" src="image/banner.png"/>
			<!-- <img src="image/banner_button.png" /> -->
		</a>
	</div>
	<div class="notice content_box">
		<div class="title_box">
			<div class="icon"></div>
			<div class="title_group">
				<div class="chinese">比赛公告</div>
				<div class="english">Competition announcement</div>
			</div>
		</div>
		<ul class="content"></ul>
	</div><div class="underway content_box">
		<div class="title_box">
			<div class="icon"></div>
			<div class="title_group">
				<div class="chinese">正在进行</div>
				<div class="english">Underway</div>
			</div>
		</div>
		<div class="content">
			<a class="underway_item" href="javascript:;">
				<img src="image/default_video.png"/>
			</a>
			<a class="underway_item" href="javascript:;">
				<img src="image/default_video.png"/>
			</a>
		</div>
	</div>
	<div class="video content_box">
		<div class="title_box">
			<div class="icon"></div>
			<div class="title_group">
				<div class="chinese">往届比赛视频</div>
				<div class="english">Game Video</div>
			</div>
		</div>
		<div class="content">
			<ul class="select_menu"></ul>
			<div class="video_group">
				<div class="prev"></div><div class="video_box"></div><div class="next"></div>
				<div class="pager"></div>
			</div>
		</div>
	</div>
</div>
<div class="footer">
	<div class="wrap">
		<ul class="nav_group">
			<li class="title">投诉建议</li>
			<li class="nav"><a href="javascript:incomplete();">举报不良信息</a></li>
			<li class="nav"><a href="javascript:incomplete();">意见反馈</a></li>
			<li class="nav"><a href="javascript:incomplete();">比赛问题</a></li>
			<li class="nav"><a href="javascript:incomplete();">报名问题</a></li>
		</ul>
		<ul class="nav_group">
			<li class="title">FLAG杯工作组</li>
			<li class="nav"><a href="javascript:incomplete();">联系我们</a></li>
			<li class="nav"><a href="javascript:incomplete();">加入我们</a></li>
			<li class="nav"><a href="javascript:incomplete();">联系方式</a></li>
		</ul>
		<div class="qr_group">
			<img class="qr_code" src="image/qr_microblog.png"/>
			<div class="title">@神奇陆夫人</div>
			<div class="label">新浪微博</div>
		</div>
		<div class="qr_group">
			<img class="qr_code" src="image/qr_flagcup.png"/>
			<div class="title">@神奇陆夫人的Flag杯</div>
			<div class="label">新浪微博</div>
		</div>
		<div class="qr_group">
			<img class="qr_code" src="image/qr_public_number.png"/>
			<div class="title">神奇的陆夫人</div>
			<div class="label">微信公众号</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.4.1.min.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="layui/layui.all.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
$(function(){
var data = {};
	//比赛公告
	$.ajax({
		url: 'data/notice.json',
		dataType : 'json',
		type : 'get',
		success : function(d){
			var content = $('<ul class="content noselect"></ul>');
			for(var i in d){
				var notice = $('<li class="notice_item">'+
					'<span class="badge">重要通告</span>'+
					'<a href="'+d[i]['href']+'" target="_blank"> '+d[i]['content']+'</a>'+
				'</li>');
				content.append(notice);
			}
			$(".notice .content").replaceWith(content);
		},
		error : function(xhr, msg, e){
			errorMsg(msg);
		}
	});
	
	//正在进行
	$.ajax({
		url: 'data/current.json',
		dataType : 'json',
		type : 'get',
		success : function(d){
			$(".underway .content .underway_item img").eq(0).attr("src", d[0]["cover"]);
			if(d[0]["url"]){
				$(".underway .content .underway_item").eq(0).attr("href", d[0]["url"]);
				$(".underway .content .underway_item").eq(0).attr("target", "_blank");
			} else{
				$(".underway .content .underway_item").eq(0).attr("href", "javascript:;");
				$(".underway .content .underway_item").eq(0).attr("target", "");
				$(".underway .content .underway_item").eq(0).click(function(){
					errorMsg("暂无链接，敬请期待！");
				});
			}
			
			$(".underway .content .underway_item img").eq(1).attr("src", d[1]["cover"]);
			if(d[1]["url"]){
				$(".underway .content .underway_item").eq(1).attr("href", d[1]["url"]);
				$(".underway .content .underway_item").eq(1).attr("target", "_blank");
			} else{
				$(".underway .content .underway_item").eq(1).attr("href", "javascript:;");
				$(".underway .content .underway_item").eq(1).attr("target", "");
				$(".underway .content .underway_item").eq(1).click(function(){
					errorMsg("暂无链接，敬请期待！");
				});
			}
		},
		error : function(xhr, msg, e){
			errorMsg(msg);
		}
	});

	//往届比赛视频
	$.ajax({
		url: 'data/video.json',
		dataType : 'json',
		type : 'get',
		success : function(d){
			data = d;
			buildMenu();
			loadVideo(1);
		},
		error : function(xhr, msg, e){
			errorMsg(msg);
		}
	});
	
	function buildMenu(){
		var i=1;
		var menu = $('<div class="select_menu"></div>');
		var offset = 212.333;
		for(var item in data){
			var option  = $('<li class="option noselect" no="'+i+'">第'+i+'届</li>');
			option.click(function(){
				if($(this).hasClass("active")){
					return;
				}
				$(".select_menu .option.active").removeClass("active");
				$(this).addClass("active");
				loadVideo($(this).attr("no"));
				var marginLeft = menu.css("margin-left").substring(0, menu.css("margin-left").length-2);
					menu.animate({
						"margin-left" : (3-$(this).index()) * offset +"px"
					});
			});
			menu.append(option);
			i++;
		}
		$(".select_menu").replaceWith(menu);
		$(".select_menu .option").eq(0).addClass("active");
	}
	
	function loadVideo(no){
		var pager = $('<div class="pager"></div>');
		var videoBox = $('<div class="video_box"></div>');
		var group = $('<div class="group noselect"></div>');
		var videos = data["NO"+no];
		for(var v in videos){
			var video_item = $('<div class="video_item" url="'+videos[v]['url']+'">'+
				'<img src="'+videos[v]['cover']+'"/>'+
				'<div class="pagenum">'+"NO."+(Number(v)+1)+'</div>'+
			'</div>');
			video_item.click(function(){
				laywindow("比赛视频", location.protocol+$(this).attr('url'), '90%', '90%');
			});
			group.append(video_item);
			if((Number(v)+1) % 6 === 0 || v == videos.length - 1){
				pager.append('<span class="item"></span>');
				videoBox.append(group);
				group = $('<div class="group"></div>');
			}
		}
		pager.find(".item").eq(0).addClass("active");
		$(".pager").replaceWith(pager);
		$(".video_box").replaceWith(videoBox);
	}
	
	var nextClick = function(){
		var gsize = $(".group").size();
		var width = $(".group").width();
		var margin = $(".group").eq(0).css("margin-left");
		if(gsize > 1 && (margin == null || getpxValue(margin) > -(gsize-1)*width)){
			$(".next").unbind("click", nextClick);
			$(".group").eq(0).animate({"margin-left" : (getpxValue(margin)-width)+"px"}, 500, function(){
				$(".next").click(nextClick);
				var aitem = $(".pager .active");
				aitem.next().addClass("active");
				aitem.removeClass("active");
			});
		}
	};
	$(".next").click(nextClick);
	var prevClick = function(){
		var gsize = $(".group").size();
		var width = $(".group").width();
		var margin = $(".group").eq(0).css("margin-left");
		if(gsize > 1 && (margin == null || getpxValue(margin) < 0)){
			$(".prev").unbind("click", prevClick);
			$(".group").eq(0).animate({"margin-left" : (getpxValue(margin)+width)+"px"}, 500, function(){
				$(".prev").click(prevClick);
				var aitem = $(".pager .active");
				aitem.prev().addClass("active");
				aitem.removeClass("active");
			});
		}
		
	};
	$(".prev").click(prevClick);
});
</script>
</body>
</html>